<template>
  <form @submit.prevent="submit">
    <div>
      <input
        type="email"
        placeholder="What's your email"
        v-model="email"
        @blur="$v.email.$touch()"
        :class="{ error: $v.email.$error }"
      />
      <div v-if="$v.email.$error">
        <p v-if="!$v.email.email" class="errorMessage">
          Please enter a valid email
        </p>
        <p v-if="!$v.email.required" class="errorMessage">Email required</p>
      </div>

      <button type="submit" :disabled="$v.$invalid">Submit</button>
    </div>
  </form>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators'
export default {
  data() {
    return {
      email: null
    }
  },
  validations: {
    email: {
      required,
      email
    }
  },
  methods: {
    submit() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        console.log(this.email)
      }
    }
  }
}
</script>
